<template>
  <div>
    <el-input v-model="value1" style="width: 120px" :disabled="disabled" placeholder="请输入" size="small" @blur="handleValueBlur"></el-input>
    <span style="margin: 0 8px">至</span>
    <el-input v-model="value2" style="width: 120px" :disabled="disabled" placeholder="请输入" size="small" @blur="handleValueBlur"></el-input>
  </div>
</template>

<script setup name="VersionRange" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const prop = defineProps({
  modelValue: String,
  type: String
});
const emit = defineEmits(['update:modelValue', 'on-change']);
const value1 = ref('');
const value2 = ref('');
const disabled = ref(false);
const handleValueBlur = () => {
  if (value1.value && value2.value) {
    emit('update:modelValue', '[' + value1.value + ',' + value2.value + ']');
    emit('on-change');
  } else {
    emit('update:modelValue', null);
    emit('on-change');
  }
};
const initData = () => {
  if (prop.modelValue) {
    const str = prop.modelValue.substring(1, prop.modelValue.length - 1);
    const arr = str.split(',');
    value1.value = arr[0];
    value2.value = arr[1];
  }
};
watch(
  () => prop.modelValue,
  () => {
    initData();
  }
);
onMounted(() => {
  initData();
  if (prop.type === 'view' || prop.type === 'complate') {
    disabled.value = true;
  } else {
    disabled.value = false;
  }
});
</script>

<style lang="scss" scoped>
.block-btn {
  font-size: 12px;
  width: 260px;
  text-align: left;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出的文本 */
}
</style>
